<template>
  <div class="hometop">
    <!-- 首页头部 -->
    <div class="beijing" @click="goban">
      <van-icon name="wap-nav" />
      {{value}}
    </div>
    <div id="sousuo"> <van-search show-action placeholder="龙卡优惠666" class="sousuo">
      <template #action></template>
    </van-search></div>
   
    <div class="img">
      <img src="../../../public/wkcimg/images/1 (1).jpg" alt="" />
    </div>
   
    <div class="box" @click="funy()">
  
    <van-button type="primary" id="button">
      <van-icon name="plus" class="add" />
    </van-button>
  </div>
  <div class="erji" v-if="bool">
    <div class="lll">
      <div class="hhh" @click="goxiaoxi">
      <van-icon name="chat-o" class="icon"/>
     <p>消息</p>
    </div>
    <div class="hhh">
      <van-icon name="service-o" class="icon"/>
     <p>智能助手</p>
    </div>
    <div class="hhh">
      <van-icon name="scan" class="icon"/>
     <p>扫一扫</p>
    </div>
    <div class="hhh">
      <van-icon name="qr" class="icon"/>
     <p>付款</p>
    </div>
    </div>
    
  </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      value:"",
     bool:false
    }
  },

 

  created(){
    this.value=this.$route.query.xiaohei
    if(this.value==null){
      this.value="西安"
    }else{
      this.val=this.$route.query.xiaohei
    } 
  },
  methods:{
    goban(){
      this.$router.push("/ban")
    },

   goxiaoxi(){
    this.$router.push("/xiaoxi")
   },
    funy(){
     if(this.bool==false){
      this.bool=true
     }else{
      this.bool=false
     }
    }
  }
};
</script>

<style scoped lang="scss">
.box{
  font-size: 0;
  background-color: white;
  width: 20%;
  display: flex;
  justify-content: center;
  #button{
  margin-right: 0;
  width: 100%;;
  height: 100%;
   font-size: 0.2rem;
  color: black;
  background-color: white;
  border: none;
}
}
.hometop {
  margin: auto;
  width: 90%;
  height: 0.3rem;
  background-color: white;
  display: flex;
  position: fixed;
  z-index: 999;
  left: 0.17rem;
 
  
  .beijing {
    font-size: 0.14rem;
    line-height: 0.3rem;
    width: 30%;
  }
  #sousuo {
    width: 40%;
    height: 100%;
    border-radius: 0.5rem;
    background-color: #f8f8f8;
    .sousuo{
      border-radius: 0.5rem;
      margin: 0;
      padding: 0;
    }
  }
  .img {
    width: 10%;
    height: 0.28rem;
    font-size: 0;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .add {
    font-size: 0.2rem;
    // margin-left: 0.1rem;
  }
  .erji{
    width: 1.04rem;
    // height: 2.04rem;
    background-color: rgb(246, 244, 244);
    position: absolute;
    right: -0.02rem;
    top: 0.3rem;
    border-radius: 0.1rem;
     border-bottom: 0.01rem solid #bababa;
     .lll{
      width: 90%;
      margin: auto;
.hhh{
      width: 100%;
      height: 0.44rem;
      display: flex;
      font-size: 0.18rem;
       justify-content: space-between;
       border-bottom: 0.01rem solid gray;
       line-height: 0.44rem;
       .icon{
        line-height: 0.44rem;
       }
    }
     }
    
  }
}
</style>